<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1 {
				width: 100%;
				height: 1000px;
				background-color: blue;
				margin: 50px;
			}
			/* 
				绝对定位，
					只要写了left、right、top、bottom。位置与父元素无关
					由浏览的边框线来决定的。
					值是正数，就是越来越远，负数，表示越来越近
			 */
			.div2 {
				position: absolute;
				background-color: red;
				top: 10px;
				left: -10px;
			}
			.div3 {
				position: absolute;
				background-color: red;
				bottom: 0;
				left: 0;
			}
			.div4 {
				position: absolute;
				background-color: red;
				top: 0;
				right: 0;
			}
			.div5 {
				position: absolute;
				background-color: red;
				bottom: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">
				我靠左上对齐
			</div>
			<div class="div3">
				我靠左下对齐
			</div>
			<div class="div4">
				我靠右上对齐
			</div>
			<div class="div5">
				我靠右下对齐
			</div>
		</div>
		<!-- 
			在四个角落分别放一个宽高为100的div
		 -->
	</body>
</html>
